<template>
  <div class="app-container">
    <toolbar :search-column.sync="query.searchColumn" :search-key.sync="query.searchKey" :search-columns="searchColumns" @search="handleFilter" @reset="handleReset" @create="handleCreate" />
    <el-table
      v-loading="listLoading"
      :data="dataList"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
    >
      <el-table-column align="center" label="登录账号" prop="account" />
      <el-table-column align="center" label="用户昵称" prop="nickname" />
      <el-table-column align="center" label="手机号" prop="phoneNumber" />
      <el-table-column align="center" label="账号状态">
        <template v-slot="{row}">
          <el-tag :type="row.status | stateCssFilter">
            {{ row.status | stateFilter }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="最后登录时间" prop="loginDate" />
      <el-table-column align="center" label="密码最后更新时间" prop="pwdUpdateDate" :show-overflow-tooltip="true" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template v-slot="{row}">
          <el-button class="text-info" size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(row)">
            修改
          </el-button>
          <el-button v-if="row.state===0" class="text-info" size="mini" type="text" icon="el-icon-edit" @click="handleModifyStatus(row, 1)">
            启用
          </el-button>
          <el-button v-if="row.state===1" class="text-info" size="mini" type="text" icon="el-icon-edit" @click="handleModifyStatus(row, 0)">
            禁用
          </el-button>
          <el-button v-if="row.state == 0" class="text-info" size="mini" type="text" icon="el-icon-edit" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="query.page" :limit.sync="query.size" @pagination="fetchList" />

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="28%">
      <el-form ref="dataForm" :rules="rules" :model="dataModel" label-width="auto" style="margin-right: 50px; margin-left:50px;">
        <el-row>
          <el-col :span="12">
            <el-form-item label="头像" prop="avatar">
              <user-img :user="{}" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="登录账号" prop="account">
              <el-input v-model="dataModel.account" maxlength="64" style="width: 350px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户昵称" prop="nickname">
              <el-input v-model="dataModel.nickname" maxlength="64" style="width: 350px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户类型" prop="userType">
              <el-input v-model="dataModel.userType" maxlength="64" style="width: 350px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户邮箱" prop="email">
              <el-input v-model="dataModel.email" maxlength="64" style="width: 350px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号" prop="phoneNumber">
              <el-input v-model="dataModel.phoneNumber" maxlength="64" style="width: 350px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-input v-model="dataModel.sex" maxlength="64" style="width: 350px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="密码" prop="password">
              <el-input v-model="dataModel.password" maxlength="64" style="width: 350px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注">
          <el-input v-model="dataModel.remark" :autosize="{ minRows: 2, maxRows: 10}" type="textarea" placeholder="备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createVersion():upVersion()">
          保存
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
// create, update, updateStatus, deleteInfo, resetPwd
import { getPageList } from '@/api/system/sys_user'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import Toolbar from '@/components/Toolbar'
import userImg from '../components/userImg'
const defaultModel = {
  account: null,
  nickname: null,
  userType: 1,
  email: null,
  phoneNumber: null,
  sex: null,
  avatar: null,
  password: null,
  remark: null
}
export default {
  components: { Pagination, Toolbar, userImg },
  filters: {
    stateFilter(status) {
      const statusMap = {
        0: '启用',
        1: '禁用'
      }
      return statusMap[status]
    },
    stateCssFilter(status) {
      const cssMap = {
        0: 'success',
        1: 'danger'
      }
      return cssMap[status]
    }
  },
  data() {
    return {
      total: 0,
      dataList: [],
      dataModel: Object.assign({}, defaultModel),
      searchColumns: [{ label: '用户昵称', key: 'nickname' }, { label: '用户账号', key: 'account' }],
      listLoading: true,
      query: {
        page: 1,
        size: 10,
        searchColumn: null,
        searchKey: null
      },
      textMap: {
        update: '修改',
        create: '添加'
      },
      dialogStatus: '',
      dialogFormVisible: false,
      downloadLoading: false,
      rules: {
        name: [{ required: true, message: '版本名称为空', trigger: 'change' }],
        version: [{ required: true, message: '版本号为空', trigger: 'change' }],
        state: [{ required: true, message: '状态为空', trigger: 'change' }],
        forcedUpgrade: [{ required: true, message: '强制升级为空', trigger: 'change' }],
        versionUrl: [{ required: true, message: '版本地址为空，请上传版本', trigger: 'change' }]
      }
    }
  },
  created() {
    this.fetchList()
  },
  methods: {
    fetchList() {
      if (this.query.searchKey && !this.query.searchColumn) {
        this.$message({
          type: 'error',
          message: '请选择搜索条件!'
        })
        return
      }
      this.listLoading = true
      getPageList(this.query).then(response => {
        this.dataList = response.data.records
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 0.5 * 300)
      }).catch(e => {
        console.error(e)
        this.listLoading = false
      })
    },
    handleCreate() {
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
    },
    handleFilter() {
      this.query.pageNum = 1
      this.fetchList()
    },
    sortChange(data) {
      const { prop, order } = data
      this.query.orderBy = (order === 'ascending' ? '+' : '-') + prop
      this.handleFilter()
    },
    // 表单重置
    handleReset() {
      this.query = {
        page: 1,
        size: 10,
        searchColumn: null,
        searchKey: null
      }
      this.handleFilter()
    }
  }
}
</script>
<style scoped>
.centered-form {
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
}
</style>
